<template>
  <div class="hot">
    <div class="hot-header clearfix">
      <div class="hot-title">
        <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt>
        本周热门榜单
      </div>
      <div class="hot-all">
        <router-link to>
          全部榜单
          <span class="iconfont">&#xe63f;</span>
        </router-link>
      </div>
    </div>
    <ul class="hot-content clearfix">
      <li v-for="(item,index) in hotList" :key="index">
        <router-link to class="goto">
          <img
            :src="item.imgUrl"
            alt
          >
          <div class="text">{{item.tytle}}</div>
          <div class="price">
            <span>
              ￥
              <strong>{{item.price}}</strong>
            </span>起
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      'hotList': [{
        'id': '01',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/201403/07/30b534b0de51ccac2906bcb6ba159988.jpg_250x250_86778c54.jpg',
        'tytle': '长隆野生动物世界',
        'price': '209.9'
      },
      {
        'id': '02',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/201405/27/ef08b0cb4a5afb2f570e5c4dff5f743e.jpg_250x250_2e9029da.jpg',
        'tytle': '长隆国际大马戏剧院',
        'price': '325'
      },
      {
        'id': '03',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1707/88/889ae02b07140066a3.img.jpg_250x250_d4ca7f0a.jpg',
        'tytle': '长隆欢乐世界',
        'price': '174.9'
      },
      {
        'id': '04',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1603/3b/3bd311262ee06d8c90.img.jpg_250x250_787a066a.jpg',
        'tytle': '广州长隆旅游度假区',
        'price': '69.7'
      },
      {
        'id': '05',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1603/1c/1c67791edbe2677b90.img.jpg_250x250_8f1dcbbd.jpg',
        'tytle': '珠江夜游',
        'price': '145'
      },
      {
        'id': '06',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1603/ee/ee2fb567add7969390.water.jpg_250x250_9f556831.jpg',
        'tytle': '广州塔',
        'price': '75'
      },
      {
        'id': '07',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/201310/22/957335b50b114829c8d65eac.jpg_250x250_d2b2bb6e.jpg',
        'tytle': '长隆飞鸟乐园',
        'price': '69.7'
      },
      {
        'id': '09',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1612/2f/2f536878037a2f3a3.water.jpg_250x250_5bb171be.jpg',
        'tytle': '珠江夜游广州塔码头',
        'price': '40'
      },
      {
        'id': '10',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/201212/31/309a88f591369b6893835fbb.png_250x250_19f299f9.png',
        'tytle': '广东科学中心',
        'price': '30'
      }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.hot {
  padding: 0 .24rem;
  margin-top: 0.2rem;
  background: #fff;
  .hot-header {
    padding: 0.24rem 0;
    .hot-title {
      float: left;
      display: inline-block;
      margin-left: 0.08rem;
      height: 0.44rem;
      color: #212121;
      font-size: 0.32rem;
      line-height: 0.44rem;
      img {
        display: inline-block;
        overflow: hidden;
        width: 0.3rem;
        height: 0.3rem;
        vertical-align: top;
      }
    }
    .hot-all {
      float: right;
    }
  }
  .hot-content {
    width:100% ;
    white-space:nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    li {
      position: relative;
      display: inline-block;
      padding: 0.06rem 0 0.2rem;
      width: 2rem;
      text-align: center;
      .goto {
        display: block;
      }
      &:not(:first-child){
        margin-left: .12rem;
      }
    }
    .text {
      margin-top: 0.12rem;
      color: #212121;
      font-size: 0.24rem;
      line-height: 0.32rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .price {
      color: #616161;
      font-size: 0.24rem;
      line-height: 0.36rem;
      span {
        color: #ff8300;
        strong {
          font-weight: 600;
        }
      }
    }
    img {
      width: 100%;
    }
  }
}
</style>
